import React from 'react'
import { Form, Input, Button } from 'antd-mobile'
import image from '../../image/image.png'
import styles from './css/zc.module.css'
import { MailOutline, ShopbagOutline, LockOutline, UserOutline } from 'antd-mobile-icons'
function zc() {
  return (
    <div className={styles.box}>
      <img className={styles.tx} src={image} alt="" />

      <Form className={styles.bd} layout='horizontal' mode='card'
        footer={
          <Button className={styles.bt} block type='submit' color='primary' size='large'>
            注册
          </Button>
        }
      >

        <Form.Item extra={<Button color='primary'>发送验证码</Button>}>
          <div style={{ display: 'flex', alignItems: 'center', fontSize: '25px' }}>
            <MailOutline />
            <Input placeholder='请输入邮箱' style={{ marginLeft: '8px' }} />
          </div>

        </Form.Item>
        <Form.Item>
          <div style={{ display: 'flex', alignItems: 'center', fontSize: '25px' }}>
            <ShopbagOutline />
            <Input placeholder='请输入验证码' style={{ marginLeft: '8px' }} />
          </div>

        </Form.Item>
        <Form.Item rules={[{ required: true }]}>
          <div style={{ display: 'flex', alignItems: 'center', fontSize: '25px' }}>
            <LockOutline />
            <Input placeholder='请输入密码' style={{ marginLeft: '8px' }} />
          </div>

        </Form.Item>
        <Form.Item rules={[{ required: true }]}>
          <div style={{ display: 'flex', alignItems: 'center', fontSize: '25px' }}>
            <LockOutline />
            <Input placeholder='请再次输入密码' style={{ marginLeft: '8px' }} />
          </div>

        </Form.Item>
        <Form.Item l extra={<a>选填</a>}>
          <div style={{ display: 'flex', alignItems: 'center', fontSize: '25px' }}>
            <UserOutline />
            <Input placeholder='请输入邀请码' />
          </div>

        </Form.Item>
      </Form>
    </div>
  )
}

export default zc